<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{ 
            margin:0;
            padding:0;
        }
        body { 
            padding: 50px; 
        } 
        .wrapper { 
            display: grid; 
            grid-template-columns: 100px 10px 100px 10px 100px 10px 100px 10px 100px; grid-template-rows: auto 10px auto 10px;
            border:1px solid #000
        } 
        .box { background-color: #444; color: #fff; font-size: 150%; padding: 20px; text-align: center; }
        .box { background-color: #444; color: #fff; font-size: 150%; padding: 20px; text-align: center; } .a{ grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; } .b { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .c { grid-column-start: 5; grid-column-end: 6; grid-row-start: 1; grid-row-end: 2; } .d { grid-column-start: 7; grid-column-end: 8; grid-row-start: 1; grid-row-end: 2; } .e { grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4; } .f { grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } .g { grid-column-start: 5; grid-column-end: 6; grid-row-start: 3; grid-row-end: 4; } .h { grid-column-start: 7; grid-column-end: 8; grid-row-start: 3; grid-row-end: 4; } .i { grid-column-start: 1; grid-column-end: 2; grid-row-start: 5; grid-row-end: 6; } .j { grid-column-start: 3; grid-column-end: 4; grid-row-start: 5; grid-row-end: 6; }
    </style>
</head>
<body>
    <div id="parent" class="wrapper"> 
        <div id="child" class="box a">A</div> 
    </div>
</body>
<script>
    parent.addEventListener('click',function(){
        console.log( 'parent冒泡触发' )
    },  false)
    parent.addEventListener('click',function(){
        console.log( 'parent捕获触发' )
    },  true)
    child.addEventListener('click',function(){
        console.log( 'child捕获触发' )
    },  true)
    
   
    child.addEventListener('click',function(){
        console.log( 'child冒泡触发' )
    },  false)

</script>
</html>